<template>
  <div class="parent">
    <echartsDom
      v-if="isShowEcharts"
      style="width: 100%; height: 100%"
      :width="'100%'"
      :height="'100%'"
      :option="option"
      :type="type"
      @setNote="getNoteData"
    />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { deviceStat } from "@/api/waterKanban";
import { useRouter } from "vue-router";
const router = useRouter();
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getNoteData = params => {
  if (params.componentType === "series") {
    // 当点击的是柱状图的柱子时，params.componentType 等于 'series'
    // alert('您点击了：' + params.name + '，值为：' + params.value);
    if (params.name == "已解决") {
      router.push({ path: "/all/alert/business", query: { active: "DONE", className: "WATER" } });
    } else {
      router.push({ path: "/all/alert/business", query: { className: "WATER" } });
    }
  }
};
setTimeout(() => {
  isShowEcharts.value = true;
  deviceStat({
    classCode: "WATER"
  }).then((response: any) => {
    option.value = {
      backgroundColor: props.type == "dark" ? "#001e3b" : "",
      tooltip: {
        confine: true,
        trigger: "axis"
      },
      grid: {
        top: "0px",
        left: "0px",
        right: "30px",
        bottom: "-20px",
        containLabel: true
      },
      xAxis: {
        show: false,
        type: "value"
      },
      yAxis: {
        axisTick: {
          show: false // 不显示坐标轴刻度线
        },
        axisLine: {
          show: false // 不显示坐标轴线
        },
        type: "category",
        data: ["待解决", "已解决", "总报警"]
      },
      series: [
        {
          name: "设备报警",
          type: "bar",
          label: {
            show: true,
            position: "right"
          },
          data: [response.alarmStat.undone, response.alarmStat.done, response.alarmStat.total],
          barWidth: "18px",
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = props.type == "dark" ? ["#FFCA45", "#04FF9D", "#FF0844"] : ["#FFCA45", "#00b36d", "#FF4355"];
                let colorItem = colorList[params.dataIndex];
                return colorItem;
              }
            }
          }
        }
      ]
    };
  });
}, 1000);
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
